<!--
 * @Author: WangGuojian 1085844536@qq.com
 * @Date: 2023-09-02 10:32:59
 * @LastEditTime: 2023-09-02 10:42:44
 * @LastEditors: WangGuojian 1085844536@qq.com
 * @FilePath: \htmld:\Developer\WGJ\VSCode_WorkSpace\Web\vue\vue-basic\19-单文件组件\School.vue
 * @Description:
-->
<template>
    <!-- 组件的机构 -->
    <div class="demo">
        <h2>学校名称: {{ schoolName }}</h2>
        <h2>学校地址: {{ address }}</h2>
        <button @click="showName">点我提示学校名</button>
    </div>
</template>

<script>
export default {
    name: 'School',
    data() {
        return {
            schoolName: '尚硅谷',
            address: '北京昌平',
        };
    },
    methods: {
        showName() {
            alert(this.schoolName);
        },
    },
};
</script>

<style>
.demo {
    background-color: orange;
}
</style>
